<template>
    <div>
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>任务列表</span>
        </div>
        <div class="content">
            <!-- <div class="left">
                <img style="width: 300px; height: 300px;" src="../../../assets//images/test_dmb.jpg" alt="">
            </div> -->
            <div class="right">
              <el-table
                class="tableList"
                :data="tableData"
                height="350"
                style="width: 100%"
                :row-class-name="rowClassName"
                >
                <!-- <el-table-column
                  prop="num"
                  label="编号"
                  width="60"
                  align="center">
                </el-table-column> -->
                <el-table-column
                  prop="name"
                  label="任务名称"
                  width="250"
                  align="center">
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="center">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.state ? 'success' : 'info'"
                      v-show="scope.row.state">
                      {{ scope.row.state ? '进行中' : '未开始' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="time"
                  label="时长"
                  width="80">
                </el-table-column> -->
              </el-table>
            </div>
        </div>
        <!-- <el-progress :percentage="77" color="#007674" style="margin: 25px 0 0 0;"></el-progress> -->
        </el-card>
    </div>
</template>

<script>
import { getTerminals,getTerminalsstate,getTerminalsmaking,getTerminalsmsg} from '../../../url/api';
    export default {
      props: [
            'dialogVisible',
            'devicedata'
        ],
        data() {
        return {
          tableData: [
        // { num: 1, name: '任务 1', state: false ,time: '2:43' },
        // { num: 2, name: '任务 2', state: true ,time: '2:43'},
        // { num: 3, name: '任务 3', state: false ,time: '2:43'},
        // { num: 4, name: '任务 4', state: false ,time: '2:43'},
        // { num: 5, name: '任务 5', state: false ,time: '2:43'},
        // { num: 6, name: '任务 6', state: false ,time: '2:43'},
        // { num: 7, name: '任务 7', state: false ,time: '2:43'},
        // { num: 8, name: '任务 8', state: false ,time: '2:43'},
        // { num: 9, name: '任务 9', state: false ,time: '2:43'},
        // { num: 10, name: '任务 10', state: false ,time: '2:43'},
      ],
      taskID:'',
        }
      },
      methods: {
        rowClassName({ row }) {
          return row.state ? 'success-row' : '';
        },
        getTasks(){
          console.log(this.devicedata);
          let param = {
            id:this.devicedata.deviceId
          }
          getTerminals(param).then((res) => {
              console.log('终端查询详情.............',res);
              this.taskID = res.data.data.taskId
              console.log(this.taskID);
              // if(this.taskID ){
                this.tableData = []
                // let params = {
                //     taskID:this.taskID
                //   }
                // getTerminalsstate(params).then((res) => {
                //     console.log('获取远程播放任务状态.............',res);
                // })
                getTerminalsmsg({}).then((res) => {
                      console.log('获取服务器音频列表.............',res);
                      let taskList = res.data.data.data.MusicInfo.MusicArray
                      taskList.forEach((item,index) => {
                      this.tableData.push({ num: index, name: item.AudioName, state: false ,time: '' })
                    });
                })
                getTerminalsmaking({}).then((res) => {
                    console.log('获取当前播放任务.............',res.data.data.data.TaskInfoArray);
                    let taskList = res.data.data.data.TaskInfoArray
                    taskList.forEach((item,index) => {
                      if(item.EndpointIpList[0].EndPointPrimaryKey == this.devicedata.deviceName){
                        this.tableData.unshift({ num: index, name: item.TaskShowInfo, state: true ,time: '' })
                      }
                    });
                })

              // }
          })
        }
      },
      mounted () {
        console.log('创建了');
        this.getTasks()
      },
      watch: {
        dialogVisible(val){
          if(val){
        console.log('创建了');
        this.getTasks()
          }
        }
      },
    }
</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 910px;
    height:450px;
    margin-bottom: 15px;
  }
  .content{
    display: flex;
    justify-content: space-between;
    .left{
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;
    }
    .right{
        width: 880px;
    }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 0px;
    }
    /deep/ .tableList .success-row {
      background-color: #f0f9eb !important;
    }
  }
</style>